<template>
  <div class="chart" v-resize="resizeCharts" ref="barChart"></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'chartHistogram',
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      charts: null
    }
  },
  computed: {},
  methods: {
    resizeCharts () {
      this.charts.resize()
    },
    initCharts () {
      this.$nextTick(() => {
        this.charts = echarts.init(this.$refs.barChart)
        this.charts.clear()
        this.charts.showLoading()
        if (this.data.length > 0) {
          this.setOption()
        }
      })
    },
    setOption () {
      const option = this.getOption()
      this.charts.hideLoading()
      this.charts.setOption(option, true)
    },
    getOption () {
      const option = {
        dataset: [
          {
            dimensions: ['name', 'value'],
            source: this.data
          },
          {
            transform: {
              type: 'sort',
              config: {
                dimension: 'value',
                order: 'desc'
              }
            }
          }
        ],
        grid: {
          top: '5%',
          bottom: '10%',
          left: '17%',
          right: '4%'
        },
        // color: '#23E36D',
        // color: ['#99CCFF', '#0099CC', '#3366CC', '#006699',
        //   '#336699', '#666699', '#333333', '#666666'],
        visualMap: {
          orient: 'horizontal',
          left: 'center',
          text: ['多', '少'],
          bottom: 20,
          // Map the score column to color
          dimension: 1,
          inRange: {
            // color: ['#99CCFF', '#0099CC', '#3366CC', '#006699',
            //   '#336699']
            color: ['#FFC8B4', '#FFFFBB', '#99FF99',
              '#77FFCC', '#77FFEE', '#66FFFF', '#77DDFF',
              '#99BBFF', '#9999FF', '#9F88FF', '#B088FF']
          }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          // axisLabel: {
          //   interval: 0,
          //   color: '#b4d7fa'
          // },
          axisLine: {
            show: false
          }
          // data: this.name
        },
        xAxis: {
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        series: [
          {
            encode: {
              y: 'name',
              x: 'value'
            },
            datasetIndex: 1,
            // data: this.value,
            // barWidth: 20,
            // barGap: '1%',
            type: 'bar',
            itemStyle: {
              barBorderRadius: [0, 6, 6, 0]
            },
            emphasis: {
              itemStyle: {
                opacity: 0.85
              }
            },
            // barWidth: 12,
            label: {
              show: true,
              position: 'right',
              color: 'black'
            }
          }
        ]
        // toolbox: {
        //   show: true,
        //   feature: {
        //     dataView: {
        //       show: false,
        //       readOnly: false
        //     }, // 数据视图
        //     magicType: {
        //       show: true,
        //       type: ['line', 'bar']
        //     }, // 动态转换
        //     restore: { show: true }, // 刷新
        //     saveAsImage: { show: true } // 保存为图片
        //   }
        // }
      }
      return option
    }
  },
  mounted () {
    this.initCharts()
  },
  beforeDestroy () {
    this.charts && this.charts.dispose()
    this.charts = null
  },
  watch: {
    data: {
      handler () {
        this.initCharts()
      }
    }
  },
  components: {}
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
